<template>
  <div>
      <el-button v-for="(item,idx) in eles" :key="idx" size="mini" type="primary" @click="tap(item)">{{item}}使用</el-button>
      <el-input v-model="input"  placeholder="p"/>
      <router-link to="/jsx">Jsx</router-link>
    <el-row>
    </el-row>
  </div>
</template>

<script setup>
// import router from '@/router'
import { useRouter } from 'vue-router'

import { ref, reactive, onMounted } from 'vue'
const input = ref('')
const eles = reactive(['input', 'Border', 'Color'])
const router = useRouter()
console.log('router ===sss ', router)

onMounted(() => {

})

const tap = function (item) {
  const that = this
  console.log('that = == ', that)
  console.log(`tap clicked to open the ele-plus ${item} compoment`)
  // open the new page
  // console.log('that =', that)
  //
  // const newpage = router.resolve({ name: 'jsx' })
  // window.open(newpage.href, '_blank')
  // const newpage = router.resolve({ path: 'jsx' })
  // const router = useRouter() 只能用在setup 和 compentment 里面
  console.log('router === ', router)
  const newpage = router.resolve({ path: '/href', query: { selected: '2' } })
  window.open(newpage.href, '_blank')
  //
}

</script>

<style>
</style>
